<template>
	<el-dialog  v-model="show" title="选择广告素材" width="970" align-center>
      <div class="search">
        <span class="checked">已选择1项</span>
        <div class="right">
          <el-input placeholder="请输入检索条件" v-model="pager.name" style="width:430px;margin-right: 20px;"></el-input>
          <el-button round :icon="Search" color="#0071bb" @click="onSearch()">搜索</el-button>
        </div>
      </div>
      <div class="tables">
        <el-table :data="tableData" style="width: 100%;">
				  <el-table-column type="selection" width="80" label=""/>
				  <el-table-column prop="name" label="广告名称" />
				  <el-table-column prop="type" label="广告类型" />
			  </el-table>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <!-- 底部分页 -->
        <div class="page_number">
		      	<el-pagination v-model:current-page="pager.currentPage" v-model:page-size="pager.pageSize" 
		      		:disabled="!pager.total"  layout="prev, pager, next, jumper,total" :total="pager.total"
		      		@size-change="handleSizeChange" @current-change="handleCurrentChange"/>
		    </div>
        <div class="df">
          <el-button @click="close()">取消</el-button>
          <el-button type="primary" @click="submit(ruleFormRef)">确定</el-button>
        </div>
        </div>
      </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { Search} from '@element-plus/icons-vue'
import { defineEmits } from 'vue';
const emit = defineEmits(['close','submit']);
interface RuleForm {
  name: string,
  type:string,
  remark:string,
  url:''
}
const tableData = ref([
  {
    id:1,
    name:'常熟广电',
    type:'图片',
  },
  {
    id:2,
    name:'常熟广电',
    type:'图片',
  },
  {
    id:3,
    name:'常熟广电',
    type:'图片',
  },
  {
    id:4,
    name:'常熟广电',
    type:'图片',
  },
])
// 分页
const pager = ref({
	currentPage:1,
	pageSize:10,
	total:10,
  // 搜索参数
  name:'',
})
// 改变pageSize
const handleSizeChange = (val : number) => {
	console.log(`${val} items per page`)
}
// 改变当前页码 currentPage
const handleCurrentChange = (val : number) => {
	console.log(`current page: ${val}`)
}
// 搜索
const onSearch = () => {

}
// 提交
const submit = async (formEl: FormInstance | undefined) => {
  await formEl.validate((valid:any, fields:any) => {
    if (valid) {
        emit('submit')
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 取消
const close = () => {
  emit('close')
}
const show = ref(true)
</script>

<style lang="scss" scoped>
.df{
    display: flex;
    align-items: center;
}
.statement{
    color: blue;
}
.dialog-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.tip{
    display: inline-block;
    width: 220px;
    margin-left: 20px;
}
.checked{
  color: #0071BB;
}
.search{
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>